<template>
  <div>
    <div class="newsDetail">
<!--      <div class="newsImg">-->
<!--        <img src="../../assets/images/22.jpg" />-->
<!--      </div>-->
      <div class="newsInfo">
        <div class="newsTitle">
          <h3>{{detail.title}}</h3>
          <div class="desc">
            <span >{{detail.desc}}</span>
          </div>
        </div>
        <div class="detail" v-html="detail.content">
        </div>
        <div class="detailBtn">
<!--          <like />-->
          <button type="contact"></button>
        </div>
      </div>
    </div>

    <div class="newsList">
      <span class="title">
        猜你还想读
      </span>
        <newList v-for="item of hotlist" :key="item.id" :list="item" />
    </div>

    <div class="reviewList">
      <span class="title">
        热门评论
      </span>
      <reviewList :relist="reList" :wid="list_id" />
    </div>

    <div class="onreview flex">
      <span class="search-form round">
        <i class="cuIcon-write icon"></i>
<!--        <input type="text" placeholder="发布评论" v-model="reviewInfo" />-->
         <group style="padding-left: .5rem">
          <x-input type="text" required @on-change="onchange()" placeholder="发布评论" v-model="value"></x-input>
        </group>
      </span>
      <button @click="bindconfirm()" class="reviewBtn">发布</button>
<!--      <span>-->
<!--        <i class="cuIcon-comment lg text-gray"></i>-->
<!--        <span>3</span>-->
<!--      </span>-->
    </div>
  </div>
</template>

<script>
import { getdetail, gethotlist, getreviewList, addpinglun } from '@/api/news'
import reviewList from '@/components/reviewList/reviewList'
import newList from './components/newList'
import { XInput, Toast } from 'vux'
export default {
  name: 'newsDetail',
  data () {
    return {
      detail: {},
      value: '',
      hotlist: {},
      reList: []
    }
  },
  components: {
    reviewList,
    newList,
    XInput,
    Toast
  },
  created () {
    console.log(this.$route.params)
    this.list_id = this.$route.params.id
    getdetail(this.$route.params.id).then(res => {
      console.log(res)
      this.detail = res.data
    })
    gethotlist().then(res => {
      this.hotlist = res.data
    })
    getreviewList(this.list_id).then(res => {
      this.reList = res.data
    })
  },
  methods: {
    bindconfirm (e) {
      if (!this.value) {
        return
      }
      addpinglun(this.list_id, localStorage.getItem('uid'), this.value, 0).then(res => {
        console.log(res)
        if (res.type === 'success') {
          this.value = ''
          this.$vux.Toast.text('评论成功', 'top')
        }
      })
    },
    onchange (e) {
      console.log(e)
      // this.reviewInfo = e
    }
  }
}
</script>

<style scoped>
  .newsImg img{
    width: 100%;
    background: #fff;
  }
  .newsInfo{
    padding: .3rem;
  }
  .onreview{
    background: #fff;
    border-top: 1px solid #efefef;
    padding: 10px 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: .96rem;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 98%;
  }
  .search-form{
    background: #efefef;
    border-radius: 50px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    width: 70%;
  }
  .search-form .icon{
    position: absolute;
    left: 15px;
    top:.25rem;
  }
  .search-form input{
    padding-left: .7rem;
    width: 70%;
    height: .7rem;
    background: none;
  }
  .reviewBtn{
    width: 1.6rem !important;
    background: #F4A439;
    border-radius: .1rem;
    margin: 0px auto;
    margin-left: .1rem;
    color: #fff;
    font-weight: normal;
    padding: .16rem 0px;
    font-size: .26rem;
  }
  .newsList,.reviewList{
    margin-top: .2rem;
  }
  .reviewList{
    margin-bottom: 1.5rem;
  }
  .newsTitle h3{
    font-size: .36rem;
    font-weight: bold;
  }
  .newsTitle .desc{
    background: #efefef;
    padding: .2rem;
    margin: .2rem 0;
    color: #222;
    line-height: .32rem;
  }
  .title{
    color: #101010;
    border-bottom: 1px solid #efefef;
      padding: .2rem 2%;
    background: #fff;
    width: 96%;
    display: block;
  }

</style>
